<script setup>
	import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
	import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
	import { useStore } from 'vuex'
	import { useRouter } from 'vue-router'
	import cf from '../../utils/commonFunction'
	import { updateUserIcon } from '../../apis/userApi'

	const store = useStore()

	// 编辑器实例，必须用 shallowRef，重要！
	const editorRef = shallowRef()

	const handleChange = (editor) => {
		console.log('change:', editor.children)
		valueHtml.value = editor.getHtml()
		store.state.userStore.postData.pcontent = valueHtml.value
		// document.getElementById('editor-content-view').innerHTML = html
		// document.getElementById('editor-content-textarea').value = html
	}
	const handleDestroyed = (editor) => {
		console.log('destroyed', editor)
	}
	const handleFocus = (editor) => {
		console.log('focus', editor)
	}
	const handleBlur = (editor) => {
		console.log('blur', editor)
	}
	const customAlert = (info, type) => {
		alert(`【自定义提示】${type} - ${info}`)
	}
	const customPaste = (editor, event, callback) => {
		console.log('ClipboardEvent 粘贴事件对象', event)
	}

	// editorRef.value.config.menus = [
	// 	'head', // 标题
	// 	'bold', // 粗体
	// 	'fontSize', // 字号
	// 	'fontName', // 字体
	// 	'italic', // 斜体
	// 	'underline', // 下划线
	// 	'strikeThrough', // 删除线
	// 	'foreColor', // 文字颜色
	// 	'backColor', // 背景颜色
	// 	'link', // 插入链接
	// 	'list', // 列表
	// 	'justify', // 对齐方式
	// 	'quote', // 引用
	// 	'emoticon', // 表情
	// 	'image', // 插入图片
	// 	'table', // 表格
	// 	'video', // 插入视频
	// 	'code', // 插入代码
	// 	'undo', // 撤销
	// 	'redo', // 重复
	// ]
	// const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
	// const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
	// const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）

	// 内容 HTML
	const valueHtml = ref('<p>hello</p>')

	// 模拟 ajax 异步获取内容
	onMounted(() => {})

	// 编辑器配置
	const editorConfig = {
		placeholder: '请输入内容...',
		MENU_CONF: {
			/* 菜单配置，下文解释 */
		},
	}

	const handleCreated = (editor) => {
		editorRef.value = editor // 记录 editor 实例，重要！
	}

	// 组件销毁时，及时销毁编辑器
	onBeforeUnmount(() => {
		const editor = editorRef.value
		if (editor == null) return
		editor.destroy()
	})
</script>

<template>
	<div style="border: 1px solid #ccc">
		<!-- 工具栏 -->
		<Toolbar
			:editor="editorRef"
			:defaultConfig="toolbarConfig"
			style="border-bottom: 1px solid #ccc"
		/>
		<!-- 编辑器 -->
		<Editor
			v-model="valueHtml"
			:defaultConfig="editorConfig"
			style="height: 500px; overflow-y: hidden"
			@onCreated="handleCreated"
			@onChange="handleChange"
			@onDestroyed="handleDestroyed"
			@onFocus="handleFocus"
			@onBlur="handleBlur"
			@customAlert="customAlert"
			@customPaste="customPaste"
		/>
	</div>
</template>

<!-- 别忘了引入样式 -->
<style src="@wangeditor/editor/dist/css/style.css"></style>
